<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车型报价</title>
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/baojia.css">
</head>
<body>
    <header class="header">
        <div class="header_wrap">
            <div class="header_logo">
                <img src="/assets/logo.png" alt="">
            </div>
            <div class="header_link">
                <div class="header_link_content">
                    <div class="link link_baojia">
                        <img src="/assets/header_link_baojia.png" alt="产品报价">
                        <span>产品报价</span>
                        <div class="header_link_baojia_link">
                            <div class="border-up"><span></span></div>
                            <div style="overflow: hidden;height: 100%;">
                                <a href="/baojia.html">漆面保护膜</a>
                                <a href="/baojia.html">车身改色膜</a>
                            </div>
                        </div>
                    </div>
                    <a href="/zhibao.html" class="link">
                        <img src="/assets/header_link_zhibao.png" alt="质保查询">
                        <span>质保查询</span>
                    </a>
                    <a href="" class="link">
                        <img src="/assets/header_link_signin.png" alt="经销商登陆">
                        <span>经销商登陆</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="header_menu">
            <div class="header_menu_list">
                <a href="/home.html" class="active">首页</a>
                <a href="/brand.html">品牌</a>
                <a href="/product.html">产品</a>
                <a href="/news.html">资讯</a>
                <a href="/example.html">案例</a>
            </div>
        </div>
    </header>
    <div class="baojia">
        <div class="baojia_list">
            <a class="baojia_list_cell active" onclick="select('color')">改色膜分类 <span>></span> </a>
        </div>
        <div class="title" id="title">
            钻石系列、哑面电镀
        </div>
        <div class="baojia_content">
            <!-- 选择品牌 -->
            <div class="baojia_type_select">
                <h4 class="baojia_type_select_title">1.选择品牌</h4>
                <a class="baojia_type_select_cell" onclick="brandSelect(this)">CC</a>
                <a class="baojia_type_select_cell" onclick="brandSelect(this)">尚酷</a>
                <a class="baojia_type_select_cell" onclick="brandSelect(this)">高尔夫</a>
                <a class="baojia_type_select_cell" onclick="brandSelect(this)">途观</a>
                <a class="baojia_type_select_cell active" onclick="brandSelect(this)">途昂</a>
                <a class="baojia_type_select_cell" onclick="brandSelect(this)">高尔夫</a>
                <a class="baojia_type_select_cell" onclick="brandSelect(this)">CC</a>
                <a class="baojia_type_select_cell" onclick="brandSelect(this)">尚酷</a>
                <a class="baojia_type_select_cell" onclick="brandSelect(this)">高尔夫</a>
                <a class="baojia_type_select_cell" onclick="brandSelect(this)">途观</a>
                <a class="baojia_type_select_cell" onclick="brandSelect(this)">途昂</a>
                <a class="baojia_type_select_cell" onclick="brandSelect(this)">高尔夫</a>
            </div>
            <!-- 选择车部位 -->
            <div class="baojia_part_car">
                <h4>宝马 - M4双门轿跑车</h4>
                <div class="car_img">
                    <img src="/assets/baojia_car.png" alt="">
                </div>
                <div class="car_whole_price">整车报价: ¥<span>3285.0</span></div>
                <div class="car_price_see" onclick="closePricePart()">查看局部报价</div>
            </div>
            <!-- 选择车型 -->
            <div class="baojia_year_select">
                <h4 class="baojia_year_select_title">2.选择车型</h4>
                <a class="baojia_year_select_cell" onclick="carTypeSelect(this)">2008</a>
                <a class="baojia_year_select_cell" onclick="carTypeSelect(this)">2009</a>
                <a class="baojia_year_select_cell" onclick="carTypeSelect(this)">2010</a>
                <a class="baojia_year_select_cell" onclick="carTypeSelect(this)">2011</a>
                <a class="baojia_year_select_cell active" onclick="carTypeSelect(this)">2012</a>
                <a class="baojia_year_select_cell" onclick="carTypeSelect(this)">2013</a>
                <a class="baojia_year_select_cell" onclick="carTypeSelect(this)">2014</a>
                <a class="baojia_year_select_cell" onclick="carTypeSelect(this)">2015</a>
                <a class="baojia_year_select_cell" onclick="carTypeSelect(this)">2016</a>
                <a class="baojia_year_select_cell" onclick="carTypeSelect(this)">2017</a>
                <a class="baojia_year_select_cell" onclick="carTypeSelect(this)">2018</a>
                <a class="baojia_year_select_cell" onclick="carTypeSelect(this)">2019</a>
            </div>
        </div>
        <!-- 改色膜下拉框 -->
        <div class="baojia_select color" id="color">
            <div class="baojia_select_wrap">
                <span class="baojia_select_close" onclick="closed('color')">X</span>
                <div class="name">改色膜分类<span>请点击选择以下分类</span></div>
                <div class="baojia_select_cell">钻石系列、哑面电镀</div>
                <div class="baojia_select_cell">钻石系列、哑面电镀</div>
                <div class="baojia_select_cell">钻石系列、哑面电镀</div>
                <div class="baojia_select_cell">钻石系列、哑面电镀</div>
                <div class="baojia_select_cell">钻石系列、哑面电镀</div>
            </div>
        </div>
        <!-- 局部报价 -->
        <div class="car_price_part" id="car_price_part" style="display: none;">
            <div class="car_price">
                <p class="p1">局部价格计算方式：</p>
                <p class="p2">以下比例均为局部对整车价格的比例。如有特殊情况请适用类似情况计算。</p>
                <table cellspacing="0" width="530" border="1">
                    <thead>
                        <tr>
                            <th>分类</th>
                            <th>敝篷跑车</th>
                            <th>跑车</th>
                            <th>三厢/两厢/SUV</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>前杠</td>
                            <td>20%</td>
                            <td>20%</td>
                            <td>15%</td>
                        </tr>
                        <tr>
                            <td>后杠</td>
                            <td>20%</td>
                            <td>20%</td>
                            <td>15%</td>
                        </tr>
                        <tr>
                            <td>引擎盖</td>
                            <td>10%</td>
                            <td>10%</td>
                            <td>10%</td>
                        </tr>
                        <tr>
                            <td>顶棚</td>
                            <td>-</td>
                            <td>10%</td>
                            <td>10%</td>
                        </tr>
                        <tr>
                            <td>后备厢</td>
                            <td>10%</td>
                            <td>10%</td>
                            <td>10%</td>
                        </tr>
                        <tr>
                            <td>侧/后叶</td>
                            <td>10%</td>
                            <td>10%</td>
                            <td>20%</td>
                        </tr>
                        <tr>
                            <td>前门</td>
                            <td>10%</td>
                            <td>10%</td>
                            <td>10%</td>
                        </tr>
                        <tr>
                            <td>后门/风柱</td>
                            <td>10%</td>
                            <td>10%</td>
                            <td>10%</td>
                        </tr>
                        <tr>
                            <td>前叶</td>
                            <td>10%</td>
                            <td>10%</td>
                            <td>10%</td>
                        </tr>
                    </tbody>
                </table>
                <div class="close" onclick="closePricePart()">x</div>
            </div>
        </div>
    </div>
    <footer class="footer">
        <div class="footer_wrap">
            <div class="list">
                <a href="/baojia.html" class="list_cell">产品报价</a>
                <a href="/zhibao.html" class="list_cell">质保查询 </a>
                <a href="" class="list_cell">经销商登陆</a>
            </div>
            <span class="phone">182 0182 5141 </span>
            <span class="email">sm_711film@163.com </span>
            <div class="qrcode">
                <img src="/assets/footer_qrcode.png" alt="">
                <p>扫一扫，关注微信小程序</p>
            </div>
        </div>
        <div class="gov">
            Copyright © 2019-2020 711 film, All Rights Reserved
        </div>
    </footer>
    <script>
        // 选择系列
        function select(id) {
            var array = [].slice.call(document.getElementsByClassName('baojia_select'))
            for (var index = 0; index < array.length; index++) {
                if (array[index].getAttribute('id') == id) {
                    array[index].style.visibility = 'visible'
                } else {
                    array[index].style.visibility = 'hidden'
                }
            }
        }

        function closed(id) {
            console.log(id)
            document.getElementById(id).style.visibility = 'hidden'
        }
    </script>
    <script>
        // 选择车型
        function brandSelect (e) {
            var classNames = e.getAttribute('class').split(' ')
            if (classNames.indexOf('active') === -1) {
                var elementTypes = document.getElementsByClassName('baojia_type_select_cell')
                for (var index = 0; index < elementTypes.length; index++) {
                    var element = elementTypes[index];
                    var elementClassNames = element.getAttribute('class').split(' ')
                    if (elementClassNames.indexOf('active') > -1) {
                        element.setAttribute('class', elementClassNames.filter(i => i!== 'active').join(' '))
                    }
                }
                e.setAttribute('class', classNames.join(' ') + ' active')
            }
        }

        // 选择年份
        function carTypeSelect (e) {
            var classNames = e.getAttribute('class').split(' ')
            if (classNames.indexOf('active') === -1) {
                var elementTypes = document.getElementsByClassName('baojia_year_select_cell')
                for (var index = 0; index < elementTypes.length; index++) {
                    var element = elementTypes[index];
                    var elementClassNames = element.getAttribute('class').split(' ')
                    if (elementClassNames.indexOf('active') > -1) {
                        element.setAttribute('class', elementClassNames.filter(i => i!== 'active').join(' '))
                    }
                }
                e.setAttribute('class', classNames.join(' ') + ' active')
            }
        }

        function closePricePart () {
            var dom = document.getElementById('car_price_part')
            if (dom.style.display == 'none') {
                dom.style.display = 'block'
            } else {
                dom.style.display = 'none'
            }
        }

    </script>
</body>
</html>